 <template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-container">
          <span
            >欢迎
            <span style="color: crimson">{{
              "【" + store.user.roleName + ":" + store.user.userName + "】"
            }}</span
            >登录</span
          >
          <el-button type="primary" @click="backlogin()">退出登录</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu
            :default-openeds="defaultOpeneds"
            :default-active="activeMenu"
            mode="vertical"
            @select="handleMenuSelect"
            router
          >
            <RecursiveMenu :menuItem="menuList" />
          </el-menu>
        </el-aside>
        <el-main width="800px">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { useCounterStore } from "@/stores/counter";
import RecursiveMenu from "../views/NewView.vue"; // 假设递归组件路径正确

import { RouterLink, RouterView } from "vue-router";
import { KongaUrl } from "@/axios/axiosHelp";

// 定义菜单数据类型
interface MenuItem {
  id: number;
  label: string;
  menuUrl: string;
  children?: MenuItem[];
}

const router = useRouter();
const store = useCounterStore();

// 菜单数据
const menuList = ref([]);

// 存储默认展开的菜单
const defaultOpeneds = ref<string[]>([]);
// 存储当前激活的菜单路径
const activeMenu = ref<string>("");
const subMenuLists: any = [];
// 获取菜单数据
const getMenu = async () => {
  try {
    const response = await KongaUrl({
      url: "/user/api/Menu/GetMenuTree",
      method: "get",
      params: {
        PId: 0,
      },
    });
    menuList.value = response.data.data;
    console.log(1111111, menuList.value);
  } catch (error) {
    console.error("获取菜单数据失败:", error);
  }
};

// 处理菜单选择事件
const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
};

const backlogin = () => {
  router.push({
    name: "home",
  });
};

onMounted(() => {
  getMenu();
});
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between; /* 使子元素两端对齐 */
  /* align-items: center; 垂直居中对齐 */
}
.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  .logo {
    margin: 0 2rem 0 0;
  }

  nav {
    text-align: center;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
